<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /* background-color: rgb(240, 108, 122); */

    }

    .headbox {
        display: flex;
        width: 100%;
        height: 40px;
        background-color: rgb(240, 108, 122);


    }

    .textHeader {
        /* width: 100%; */
        height: 20px;
        color: #ffff;
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
        margin-left: 27%;
        /* flex: 1; */

    }

    .leftlabel img {
        width: 20px;
        height: 20px;
        margin-top: 10px;
        margin-left: 30px;
    }

    .home {
        width: 100%;
        height: 200px;
        position: relative;
    }

    .centerhome {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;

    }

    .centerhome img {
        width: 100px;
        height: 100px;

    }

    .centerinput {
        width: 100%;
        height: 450px;
        position: relative;

    }

    .centerinput input {
        width: 200px;
        height: 30px;
        /* margin-left: 50px;
        margin-top: 20px; */
        border: none;
        /* padding: 0; */

    }

    label {
        padding: 0 15px;


    }



    #whiwtebg {
        background-color: rgb(240, 108, 122);
        color: floralwhite;
        border-radius: 25px;
        margin-top: 20px;
        margin-left: 80px;
        /* width: 80%;
        height: 40px; */

    }

    .color {
        text-indent: 15px;
    }

    hr {
        width: 230px;
        margin-right: 25px;

    }

    #product-name {
        margin-left: 5px;


    }

    #product-original-price {
        margin-left: 13px;


    }

    #product-current-price {
        margin-left: 13px;


    }

    .imgs {
        position: relative;

        width: 120px;
        height: 127px;
        border: 1px solid gainsboro;
        margin-left: 40px;
    }

    .imgs img {
        position: absolute;
        width: 120px;
        height: 127px;
        /* margin-left: 40px; */


    }

    .imgs .default {
        position: absolute;
        width: 120px;
        height: 127px;
        /* margin-left: 30px; */


    }

    .imgs input {
        position: absolute;
        width: 120px;
        height: 127px;
        opacity: 0;


    }

    .imgbox {
        width: 100%;
        height: 170px;
        display: flex;


    }

    .span1 {
        margin-left: 15px;
    }

    .span2 {
        width: 100px;
        height: 50px;
    }


    textarea {
        width: 220px;
        height: 100px;
    }

    .area {
        display: flex;
    }
</style>

<body>
    <!-- <div class="big"> -->
    <header class="headbox">
        <div class="leftlabel">
            <img src="../img/向左_返回.png">

        </div>

        <div class="textHeader">添加商品</div>

    </header>
    <main>

        <div class="centerinput">
            <label for="product-name">商品名：&nbsp;&nbsp;</label>
            <input type="text" id="product-name" placeholder="请输入商品名"><br>
            <hr>

            <label for="product-category">商品分类：</label>
            <input type="text" id="product-category" placeholder="请输入商品分类"><br>
            <hr>

            <label for="product-tags">商品标签：</label>
            <input type="text" id="product-tags" placeholder="请输入商品标签"><br>
            <hr>

            <label for="product-original-price">原价：&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input type="text" id="product-original-price" placeholder="请输入商品原价"><br>
            <hr>

            <label for="product-current-price">现价：&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input type="text" id="product-current-price" placeholder="请输入商品现价">
            <hr>
            <div class="imgbox">
                <!-- <label for="product-image">商品图片：</label> -->
                <span class="span1">添加商品:</span>
                <div class="imgs">
                    <img src="../img/user.jpg" class="default">
                    <img src="http://8.137.157.16:9000/images/upload/1711286037694.png" class="userimg">
                    <input type="file" id="inp" class="goodsimg">

                </div>
            </div>

            <div class="area">
                <div class="span2">
                    <label>商品简介:</label>
                </div>
                <textarea id="product-introduce" placeholder="请输入商品介绍"></textarea>
            </div>

            <input type="submit" id="whiwtebg" value="上传商品"><br>

        </div>
    </main>
    <footer></footer>

    <!-- </div> -->


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>

        let data = localStorage.getItem('data');
        let userId = (JSON.parse(data)).account
        console.log(userId);


        let inputDom = document.querySelector('#inp');
        let userimgDom = document.querySelector('.userimg');
        let defaultDom = document.querySelector('.imgs>.default');
        let submitDom = document.querySelector('#whiwtebg');


        submitDom.addEventListener('click', function () {
            let name = document.querySelector('#product-name').value;
            let classify = document.querySelector('#product-category').value;
            let tags = document.querySelector('#product-tags').value;
            let outprice = document.querySelector('#product-original-price').value;
            let current = document.querySelector('#product-current-price').value;
            let imgs = document.querySelector('.userimg').src;
            let text = document.querySelector('#product-introduce').value;


            console.log(name, imgs);

            let obj = { userId: userId, title: name, img: imgs, type: classify, current_price: current, old_price: outprice, tags: tags, desc_text: text }
            console.log(obj);
            axios.post('http://8.137.157.16:9000/goods/add', obj)
                .then(function (res) {
                    console.log(res);
                    window.location.href = './商品列表.html';
                }).catch(function (err) {
                    console.log(err);
                });


        })

        // 上传图片
        let userimg = document.querySelector('.userimg');
        let inp = document.querySelector('#inp');

        inp.addEventListener('change', function () {
            let file = inp.files[0];
            let formData = new FormData();
            formData.append('file', file);
            axios.post('http://8.137.157.16:9000/goods/upload', formData)
                .then(function (res) {
                    console.log(res.data);
                    userimg.src = "http://8.137.157.16:9000" + res.data.data;
                })
                .catch(function (err) {
                    console.log(err);

                    document.querySelector('.leftlabel').addEventListener('click', function () {
                        location.href = './商品列表.html'


                    });
                });

                
            })





    </script>

</body>

</html>